Components › Navigation › Section top bar › Title with entity tile

Title with entity tile

canon

Identity of the Section top bar: exactly one of icon, colour tile, avatar, heading dropdown or inline rename.

Rule confirmed in code on meeting detail (acrm !4014, 27 Sep 2026): a record that IS a thing, not an identity, gets the flat `icon` prop (20px, `--fg-secondary`) inherited from its section's menu mark — `MeetingDetailPage.tsx` passes `entityMark(...).icon` from the Kalendář mark, same as Deals/Tasks; no 32px `kind` tile, since a meeting is not a person or a company.

Used in 55 files · 49 areas · 70× — components/PageHeader, components/agent-desk, components/datamart, components/segment, pages/AccountingInvoiceDetailPage, pages/AccountingInvoiceEditPage …

Keyboard

  • The static forms (icon, tile, avatar) are text — nothing to focus.
  • The dropdown form is a button: Tab reaches it, Enter or Space opens the menu, Escape closes it and returns focus.
  • Rename: Enter commits, Escape cancels, blur commits once (a latch prevents Enter-then-blur from saving twice, and Escape-then-blur from resurrecting a cancelled save). Both keys stop propagating so a dialog's Escape or a row's Enter does not fire as well.
  • While renaming the input is disabled and removed from the tab order, so the user cannot start a second edit over an unfinished save.

ARIA

  • The mark (tile, icon, avatar) is decorative; the accessible name is the text next to it.
  • The dropdown form carries aria-expanded through the bar's own trigger contract, and its menu is a canonical popover.
  • Rename mode exposes an input named by renameAriaLabel (falling back to a sensible default), so a screen reader announces what is being renamed.
  • The component's dev-only warnings enforce that an identity exists at all — a bar with no mark is a bug, not a variant.
  • The title is not a heading element; the page owns its own <h1>.

Focus

  • The dropdown form takes the foundation ring from ds.css (outline: 2px solid var(--accent)); the tile and avatar are inside the same control, so the ring wraps the whole identity.
  • Entering rename mode moves focus into the input; committing or cancelling returns it to the name.

Contrast

Computed from packages/ui/src/tokens/tokens.css:

  • Name .tbar-h: ink on --surface-100 = 17.59:1 light, 14.53:1 dark.
  • Tile: the icon sits on its tone tint; the seven tones are the DS tints, each carrying its own ink — all above the 3:1 non-text minimum, and the tile is never the only carrier of meaning.
  • Avatar .nav-pav: initials on a generated hue, with a dark-theme override so the contrast holds in both themes.
  • Chevron of the dropdown form --fg-muted = 2.85:1 light — below the 3:1 non-text minimum; the hover surface and the name carry the affordance.

Known limits

  • The tone is decorative only: a colour-blind user gets no information from it, which is intended — nothing depends on it.
  • The chevron is muted (2.85:1 in light theme).
  • Rename has no error state of its own; a failed save has to be reported by the screen.
  • A very long name is not truncated, so on a narrow screen the controls after it move out of view (the bar scrolls).

Source: docs/section-top-bar/title-with-entity-tile.a11y.md · GitLab